طراحي سايت
با ساخت Flexbox Grid واکنشگرا در CSS، می توانید از آن در هر پروژه وبی استعمال نمائید. با لیداوب همدم باشید تا چگونگی تولید آن را فرا بگیرید. دراین grid میخواهیم سه نقطه بریک
با ساخت Flexbox Grid واکنشگرا در CSS، می توانید از آن در هر پروژه وبی به کار گیری فرمائید. با لیداوب یار و همدم باشید تا چگونگی تولید آن را فرا بگیرید.
درین grid می خواهیم سه نقطه بریک پوینت s ، m و l داشته باشیم و هر چه فراتر از l باشد از ردیف‌های اول به کار گیری مینمایند که هیچ پیشوندی ندارند مانند col-12 . اولی کاری که بایستی انجام دهیم این میباشد که آن را در _var.less در اختیار بگذاریم تا هر کسی بتواند آن را مطابق با پروژه خویش تغییر تحول دهد:
// _vars.less
@s:~\"only screen and (max-width: 480px)\"; // Small Phones
@m:~\"only screen and (max-width: 768px)\"; // Normal Phones
@l:~\"only screen and (max-width: 1024px)\"; // Tablets
آنچه مشاهده میکنید تمام نقاط بریک پوینتی میباشد که میپندارم برای تلفن همراه نیاز خواهید داشت. در حالتی که فکر‌می‌کنید موردها دیگری هم لازم میباشد به آن بیشتر کرده و نامی که میخواهید روی آن قرار دهید.
ساخت Loop
ما پیش از این یک loop برای نقاط بریک پوینت غیر واکنشگرای خویش ساخت کرده‌ایم که این چنین میباشد:
//_loops.less
// Loop for normal cols
.generateCols(@counter) when (@counter > 0) {
@width: (@counter / @cols ) * 100;
.col-@{counter} {
flex-basis: ~\"@{width}%\";
max-width: ~\"@{width}%\";
}
.col-offset-@{counter} {
margin-left: ~\"@{width}%\";
}
.generateCols(@counter - 1));
}
در صورتی به کدها نگاه نمائید، می بینید که دراین باره، loop یک آرگومان پذیرفته و آن هم شماره ردیف میباشد. این برای gridهایی که واکنشگرا نیستند، فوق العاده میباشد البته زمانی می خواهید نقاط بریک پوینت را ساخت نمایید به آنان برای ساخت کلاسهای همنام با نقاط بریک پوینت نیاز خواهید داشت. براین اساس، ما بایستی یک loop تازه در _loop.less تولید کنیم که ردیف‌های واکنشگرای مارا به وجود می آورند:
_loops.less
// Create the responsive loops that also takes the media as an argument
// this media is our breakpoints
.generateResponsiveCols(@counter, @media) when (@counter > 0) {
// In here we define the width
// and this will be the number of the column we are in divided by the number of columns we have.
// Imagine this is column 6 and this will give us 0.5 and if multiply it by 100 we will get 50%
@width: (@counter / @cols ) * 100;
// we used to only have .col-@{counter} but now that we added the media param
// we insert it here so that it creates classses like .col-s-10 and we can use this in our grid
.col-@{media}-@{counter} {
flex-basis: ~\"@{width}%\";
max-width: ~\"@{width}%\";
}
// Create our resposnive offset classes
.col-offset-@{media}-@{counter} {
margin-left: ~\"@{width}%\";
}
// Decrease the counter by one so we don\'t have an infinite loop
// and also pass it the media so that it generates the next loop
.generateResponsiveCols((@counter - 1), @media);
}
هم اکنون ما loopها را تولید کردیم و آن ها تمام کلاسهای متبوع مارا تولید خواهند کرد البته ما هنوز نیاز به فراخوانی این loopها داریم تا کلاس‌هایی که لازم داریم را ساخت نمایند. به این ترتیب ، به _grid.less رفته و تمام مدیا کوئری‌های ما یحتاج خویش را تولید کرده و داخل هر کدام از آنها میکسین generateResponsiveCols را فراخوانی کرده و تعداد ردیف‌ها و نقاط بریک پوینت فعلی خویش را به آن بیش تر می کنیم:
_grid.less
.row,
.column {
...
@media @l {
// Call our large columns
.generateResponsiveCols(@cols, l);
}
@media @m {
// Call our medium columns
.generateResponsiveCols(@cols, m);
}
@media @s {
// Call our small columns
.generateResponsiveCols(@cols, s);
}
}
اکنون در صورتی gulp less را در کنسول خویش اجرا کرده و HTML خویش را گشوده کنیم می بایست ردیف‌های واکنشگرا را مشاهده کنیم. درصورتی که برگه را تغییر تحول اندازه دهید، خواهید روءیت کرد که ردیف‌ها مبنی بر نقاط برک پوینتی که روی مرورگر مشاهده می کنید، اخلاق می کنند.
نمای موبایل:
نمای پرتره آیپد:
نمای گسترده آیپد:
مشاهده کردید که کلاسهای واکنشگرا به نیکی فعالیت مینمایند ولی هنوز یک عمل را انجام نداده‌ایم که یک قسمت مهم در هر grid واکنشگرا می باشد و آن هم بضاعت نهفته کردن ردیف‌ها با اعتنا به اندازه برگه هست و همان طور که در نمای موبایل مشاهده می کنید، این حادثه هنوز چهره نداده میباشد و بایستی آن را طولانی تر کرد. برای معمولی‌خیس کردن، ما کلاسهای col-s-hidden ، col-m-hidden ، col-1-hidden و col-hidden را برای پوشش اسم ردیف‌ها و نقاط برک پوینت، فراخوانی می کنیم. اضافه کردن این کلاس‌ها نسبتا معمولی میباشد زیرا تمام کاری که می بایست انجام دهیم نهفته کردن ردیف‌های متبوع در نقطه برک پوینت درست میباشد. کد تحت بهتر میتواند این زمینه را توضیح دهد:
// grid.less
@media @l {
.generateResponsiveCols(@cols, l);
// hide any element that has the class col-l-hidden
.col-l-hidden {
display: none;
}
// show all the other hidden elements that were meant for other breakpoints
.col-s-hidden,
.col-m-hidden,
.col-hidden {
display: block;
}
}
کاری که ما انجام میدهیم، نهفته کردن ستونی میباشد که با نقطه برک پوینت مطابقت داراست و اکران سایر ردیف‌ها چون آنها با نقطه برک پوینت مطابقت ندارند. اکنون که دیدیم به چه شکل این کلاسٰ‌ها افزوده میشوند، همین عمل را برای بقیه نقاط برک پوینت نیز انجام می دهیم:
// grid.less
.row,
.column {
....
// Aply hidden classes to the \"primary\" columns
.col-s-hidden,
.col-m-hidden,
.col-l-hidden {
display: block;
}
.col-hidden {
display: none;
}
// add hidden classes to our l breakpoint
@media @l {
.generateResponsiveCols(@cols, l);
.col-s-hidden,
.col-m-hidden,
.col-hidden {
display: block;
}
.col-l-hidden {
display: none;
}
}
// add hidden classes to our m breakpoint
@media @m {
.generateResponsiveCols(@cols, m);
.col-s-hidden,
.col-l-hidden,
.col-hidden {
display: block;
}
.col-m-hidden {
display: none;
}
}
// add hidden classes to our s breakpoint
@media @s {
.generateResponsiveCols(@cols, s);
.col-m-hidden,
.col-l-hidden,
.col-hidden {
display: block;
}
.col-s-hidden {
display: none;
}
}
}
هم اکنون چنانچه index.html در یک برگه اکران کوچک مجدد بار گذاری شود، چیزی مانند این را خواهید رویت کرد:
اضافه کردن کلاس های Helper
خواسته از کلاسهای Helper هر چیزی میباشد که به تطابق موادتشکیل دهنده مبنی بر روشی که ما می خواهم آن‌ها‌را در کانتینر ببینم، امداد میکند. با flex می توانیم این عمل را به سادگی با به فعالیت بردن align-items و justify-content انجام دهیم. به این ترتیب، بیایید یه خرده همترازی افقی به grid خویش طولانی تر کنیم:
// grid.less
.container {
....
.justify-center {
justify-content: center;
}
.justify-end {
justify-content: flex-end;
}
.justify-start {
justify-content: flex-start;
}
.justify-around {
justify-content: space-around;
}
.justify-between {
justify-content: space-between;
}
}
درصورتی که بخواهید یکی این کلاس‌ها را به ردیف‌ها طولانی تر نمایید، خواهید رویت کرد که‌این طریق فعالیت مینماید ولی اختلال این میباشد که در صورتی بخواهید آن را به عنوان مثال به ul بیشتر نمائید، هیچ اتفاقی نمی‌افتد زیرا ul یک کانتینر فلکس وجود ندارد. ما می بایست مدام عناصری را استعمال کنیم که دارنده کلاسی می باشند که مشتمل بر justify- برای display: flex بوده تا کاری مانند این عمل انجام دهید:
// grid.less
[class*=\"justify-\"] {
display: flex;
}
حال ما کلاسهای justify گردیده و در درحال حاضر فعالیت را برای تمام موردهای همترازی افقی داریم. شاید از خودتان بپرسید پس کلاسهای همترازی عمودی کجا میباشند، برای تولید آن کلاس‌ها می بایست کد ذیل را داشته باشیم:
// grid.less
.container {
....
[class*=\"items-\"] {
display: flex;
}
.items-center {
align-items: center;
}
.items-start {
align-items: flex-start;
}
.items-end {
align-items: flex-end;
}
.items-stretch {
align-items: stretch;
}
}
به همین راحتی، کلاسهای helper ما هم مهیا شد تا به grid بیشتر گردیده و به ما در مطابقت و همخوانی موادسازنده یاری دهد. در حالتی که کلاسهای دیگری برای بهبود grid خویش لازم دارید مانند لبه یا این که لایی گذاری، میتوانید آن ها را نیز درین فولدر تولید نمائید.
:: برچسب‌ها:
طراحي سايت ,
:: بازدید از این مطلب : 167
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
عضو شوید
عضویت سریع
آمار مطالب
آمار بازدید
